<template>
  <div class="drawContent" :style="{ height: height }">
    <div
      :class="!mainScreen ? 'videoWrap' : 'mapWrap'"
      :style="!mainScreen ? { height: height } : { height: '310px' }"
      @click="changeMainScreen('video',$event)"
    >
      <VideoPlayer
        v-if="type==='live'"
        :options="getVideoOptions"
        :style="!mainScreen ? { height: height } : { height: '310px' }"
      />
      <Player
        v-else
        id="retunPlayer"
        ref="originRef"
        :options="getVideoOptions"
        :style="!mainScreen ? { height: height } : { height: '310px' }"
        @video-status="handleVideoStatus"
      />
      <!-- 切换视频 -->
      <div v-if="type === 'live' && inspectionType !== 3" v-show="!mainScreen" class="playType">
        <n-select v-model:value="videoType" :options="PLAY_VIDEO_TYPE" @change="changePlayType" />
      </div>
    </div>
    <div
      :class="mainScreen ? 'videoWrap' : 'mapWrap'"
      :style="mainScreen ? { height: height } : { height: '310px' }"
      @click="changeMainScreen('map',$event)"
    >
      <underlay
        ref="mapRef"
        :selected-info="props.selectedInfo"
        :video-info="videoInfo"
        :grid-size="grid.gridSize"
        :legend-index="grid.lengendIndexVisible"
        :main-screen="mainScreen"
        @close-index="changeColor(false)"
      />
    </div>
    <div v-if="type === 'return'" class="infoWrap">
      <!-- <div class="title">现场情况</div> -->
      <div class="changeWrap" />
      <!-- 网格属性设置 -->
      <div class="grid-attribute">
        <!-- 网格大小 -->
        <div class="grid-style grid-size">
          <p class="style-title">
            <img :src="getImageUrl('grid')">
            监测网格信息
          </p>
          <p class="slider-setting">
            <span>网格大小:</span>
            <n-slider v-model:value="grid.gridSize" max="200" disabled="true" />
            <span class="slider-value">{{ grid.gridSize }}</span>
          </p>
          <p class="size-list">
            <span
              v-for="(item,index) in grid.sizeList"
              :key="index"
              :class="{'is-active' : item === grid.gridSize}"
              @click="changeGridSize(item)"
            >{{ item }}</span>
          </p>
        </div>
        <div class="grid-style grid-color">
          <p class="style-title">
            <img :src="getImageUrl('color')">
            颜色调整
          </p>
          <p>注: 网格值低于最小值在图例中按最小值颜色显示,高于最大值按最大值显示。</p>
          <p class="change-color" :class="{'btn-disable' : !mainScreen}" @click="changeColor(true)">颜色调整</p>
        </div>
      </div>
      <div class="btns">
        <div class="btn" @click="exportExcel">导出监测数据</div>
        <div class="btn" :class="{'btn-disable' : !mainScreen}" @click="exportDoc">导出监测报告</div>
      </div>
    </div>
    <div v-if="type === 'live'" class="infoWrap">
      <!-- <div class="title">现场情况</div> -->
      <div class="changeWrap" />
      <div v-if="inspectionType !== 3" class="title">基本信息</div>
      <div v-if="inspectionType !== 3" class="basicInfoWrap">
        <div class="infoItem">
          <div class="icon">
            <img src="../../../assets/airportInfo/1.png" alt="">
          </div>
          <div class="textWrap">
            <div class="value">{{ props.airportInfo.voltage || '--' }}</div>
            <div class="label">无人机电量(%)</div>
          </div>
        </div>
        <div class="infoItem">
          <div class="icon">
            <img src="../../../assets/airportInfo/3.png" alt="">
          </div>
          <div class="textWrap">
            <div class="value">{{ props.airportInfo.mileage || '--' }}</div>
            <div class="label">续航里程(KM)</div>
          </div>
        </div>
        <div class="infoItem">
          <div class="icon">
            <img src="../../../assets/airportInfo/5.png" alt="">
          </div>
          <div class="textWrap">
            <div class="value">{{ props.airportInfo.alt || '--' }}</div>
            <div class="label">飞行高度(M)</div>
          </div>
        </div>
        <div class="infoItem">
          <div class="icon">
            <img src="../../../assets/airportInfo/6.png" alt="">
          </div>
          <div class="textWrap">
            <div class="value">{{ props.airportInfo.hspeed || '--' }}</div>
            <div class="label">飞行速度(m/s)</div>
          </div>
        </div>
        <div class="infoItem">
          <div class="icon">
            <img src="../../../assets/airportInfo/4.png" alt="">
          </div>
          <div class="textWrap">
            <div class="value">{{ props.airportInfo.distToHome || '--' }}</div>
            <div class="label">距离机场(M)</div>
          </div>
        </div>
        <div class="infoItem">
          <div class="icon">
            <img src="../../../assets/airportInfo/2.png" alt="">
          </div>
          <div class="textWrap">
            <div class="value">{{ props.airportInfo.tsingal || '--' }}</div>
            <div class="label">图传信号(%)</div>
          </div>
        </div>
      </div>
      <div v-if="inspectionType !== 3" class="title">机场气象</div>
      <div v-if="inspectionType !== 3" class="airportInfo">
        <div class="airportInfoItem">
          <div class="label">风速</div>
          <div class="icon-wrap">
            <div class="value">{{ props.airportem.wspd || '-- ' }}</div>
            <div class="icon">
              <img src="../../../assets/weather/fengsu.png" alt="">
            </div>
          </div>
        </div>
        <!-- <div class="airportInfoItem">
          <div class="label">风向</div>
          <div class="icon-wrap">
            <div class="value">{{ props.airportem.wdir || '-- ' }}</div>
            <div class="icon">
              <img src="../../../assets/weather/fengxiang.png" alt="">
            </div>
          </div>
        </div> -->
        <div class="airportInfoItem">
          <div class="label">大气压力</div>
          <div class="icon-wrap">
            <div class="value">{{ props.airportem.hpa || '-- ' }}</div>
            <div class="icon">
              <img src="../../../assets/weather/daqiyali.png" alt="">
            </div>
          </div>
        </div>
        <div class="airportInfoItem">
          <div class="label">空气湿度</div>
          <div class="icon-wrap">
            <div class="value">{{ props.airportem.hum || '-- ' }}</div>
            <div class="icon">
              <img src="../../../assets/weather/kongqishidu.png" alt="">
            </div>
          </div>
        </div>
        <div class="airportInfoItem">
          <div class="label">降雨量</div>
          <div class="icon-wrap">
            <div class="value">{{ props.airportem.rainfull || '-- ' }}</div>
            <div class="icon">
              <img src="../../../assets/weather/jiangyuliang.png" alt="">
            </div>
          </div>
        </div>
        <div class="airportInfoItem">
          <div class="label">空气温度</div>
          <div class="icon-wrap">
            <div class="value">{{ props.airportem.tmp || '-- ' }}</div>
            <div class="icon">
              <img src="../../../assets/weather/kongqiwendu.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div v-if="inspectionType !== 3" class="commandWrap">
        <div class="button" style="margin-top: 5px;" @click="hoverClick">悬停</div>
        <div class="button" @click="resetClick">返航</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import underlay from './Underlay.vue'
import { computed, onMounted, ref, nextTick, watchEffect, onBeforeUnmount, reactive } from 'vue'
import VideoPlayer from '@/components/VideoPlayer/index.vue'
import Player from '@/components/VideoPlayer/player.vue'

import { getGenerateTable, exportReport, getTypeVideoType, airportHover, airportReset } from '@/api/air-data/index.js'
import { PLAY_VIDEO_TYPE } from '@/utils/dictionary'

const props = defineProps({
  videoUrl: {
    type: String,
    default: ''
  },
  selectedInfo: {
    type: Object,
    default: () => { }
  },
  airportList: {
    type: Array,
    default: () => []
  },
  airportInfo: {
    type: Object,
    default: () => {}
  },
  airportem: {
    type: Object,
    default: () => {}
  },
  playVideoUrlObj: {
    type: Object,
    default: () => {}
  }
})
const mapRef = ref()

// const getAssetsFile = (url) => {
//   return new URL(`../../../assets/${url}`, import.meta.url).href
// }

const height = document.documentElement.clientHeight - 100 + 'px'
const mainScreen = ref(false)
const currentMain = ref('video')

const taskId = computed(() => props.selectedInfo.currentTask)
const droneId = computed(() => props.selectedInfo.droneId)
const getVideoOptions = ref(
  {
    aspect: 'fullscreen',
    videoUrl: null,
    videoTitle: null,
    live: true
  }
)
// const getVideoOptions = computed(() => {
//   return {
//     aspect: 'fullscreen',
//     videoUrl: null,
//     videoTitle: null,
//     live: true
//   }
// }
// )

onMounted(() => {
  // const originPlayerTimer = setTimeout(() => {
  //   initOriginPlayer(props.videoUrl)
  //   clearTimeout(originPlayerTimer)
  // }, 3000)
  initOriginPlayer(props.videoUrl)

  hanldePlayUrl()
  if (inspectionType.value !== 3 && props.selectedInfo.type === 'live') {
    console.log(props.selectedInfo.type)
    scrollGetVideoById(taskId.value, droneId.value)
  }
})
onBeforeUnmount(() => {
  clearInterval(timer.value)
})
// 当前打开的是直播or回放
const type = computed(() => props.selectedInfo.type)
const inspectionType = computed(() => props.selectedInfo.inspectionType)
const changeMainScreen = (type, event) => {
  event.stopPropagation()
  // 点击视频控件或其他控件时不切换
  if (event.target.nodeName !== 'VIDEO' && event.target.nodeName !== 'CANVAS') return
  // 点击大窗口时不切换
  if (type === currentMain.value) return
  currentMain.value = type
  mainScreen.value = !mainScreen.value
  if (!mainScreen.value) {
    grid.lengendIndexVisible = false
  }
  mapRef.value.airInfowindowClose()
}

const videoInfo = ref({
  url: null,
  currentTime: 0,
  duration: 100,
  isLive: false,
  status: 'init'
})
const originRef = ref()
// 回放视频与无人机轨迹的联动
function handleVideoStatus(status) {
  if (!originRef.value) return
  const { currentTime, duration } = originRef.value?.getTime()
  videoInfo.value = {
    currentTime,
    duration,
    status: status
  }
}

// 回放视频初始化
function initOriginPlayer(url) {
  videoInfo.value.status = 'init'
  const origin = {
    width: '100%',
    height: '446px',
    // 播放的是原视频而非 AI分析后的视频
    source: url
  }
  originRef.value?.init(origin)
  // setTimeout(() => {
  //   if (videoInfo.value.status === 'init') {
  //     initOriginPlayer()
  //   }
  // }, 30000)
}
// 处理播放视频的地址
const videoType = ref(null)
function hanldePlayUrl() {
  if (inspectionType.value === 3) {
    getVideoOptions.value.videoUrl = props.videoUrl
  } else {
    if (props.selectedInfo.status === 6 || props.selectedInfo.status === 5) {
      getVideoOptions.value.videoUrl = props.playVideoUrlObj.externalMonitorUrl
      videoType.value = 1
    } else if (props.selectedInfo.status === 10) {
      getVideoOptions.value.videoUrl = props.playVideoUrlObj.playUrl
      videoType.value = 2
    }
  }
}

watchEffect(() => {
  hanldePlayUrl()
})
// 轮询视频切换地址
const videoList = ref({})
const timer = ref(null)
function scrollGetVideoById(id, droneId) {
  getTypeVideoType(id, droneId).then(res => {
    if (res.code === 0) {
      videoList.value = res.data
    }
  })
  timer.value = setInterval(() => {
    getTypeVideoType(id, droneId).then(res => {
      if (res.code === 0) {
        videoList.value = res.data
      }
    })
  }, 2000)
}
// 切换视频方式
function changePlayType(type) {
  switch (type) {
    case 1:
      getVideoOptions.value.videoUrl = videoList.value.externalMonitorUrl
      break
    case 2:
      getVideoOptions.value.videoUrl = videoList.value.playUrl
      break
    case 3:
      getVideoOptions.value.videoUrl = videoList.value.internalMonitorUrl
      break
  }
}
// 悬停
function hoverClick() {
  airportHover({ inspectiontId: taskId.value }).then(res => {
    if (res.code === 0) {
      console.log('悬停成功了')
    }
  })
}
// 返航
function resetClick() {
  airportReset({ inspectionId: taskId.value }).then(res => {
    if (res.code === 0) {
      console.log('返航成功了')
    }
  })
}

// 导出监测数据excel
function exportExcel() {
  getGenerateTable(taskId.value).then(res => {
    if (res.code === 0) {
      window.open(res.data.ossUrl)
    }
  })
}

// 导出监测报告
function exportDoc() {
  if (!mainScreen.value) return
  mapRef.value.getReportImg() // 痛苦的异步回调开端
}

// 网格样式
const grid = reactive({
  sizeList: [50, 100, 150, 200],
  gridSize: 100,
  lengendIndexVisible: false
})

const changeGridSize = (size) => {
  grid.gridSize = size
  changeColor(false)
}

const changeColor = (visible) => {
  if (!mainScreen.value) return
  grid.lengendIndexVisible = visible
}

const getImageUrl = (src) => {
  return new URL(`../../../assets/gis/${src}.png`, import.meta.url).href
}

</script>

<style scoped lang="scss">
.drawContent {
  //display: flex;
  //justify-content: space-between;
  position: relative;
  overflow: hidden;
  .videoWrap {
    position: absolute;
    z-index: 9;
    width: 78%;
    cursor: pointer;
  }
  .mapWrap {
    width: 370px;
    height: 310px;
    border: 1px solid #00b3ff;
    position: absolute;
    right: 20px;
    top: 6px;
    cursor: pointer;
    z-index: 99;
  }
  .playType{
    position: absolute;
    top: 40px;
    left: 40px;
    width: 200px;
    background-color: transparent;
    z-index: 99;
  }
  .mapWrapFullscreen {
    width: 100%;
    height: 100%;
  }
  .infoWrap {
    margin-left: 12px;
    width: 400px;
    height: 100%;
    padding: 15px;
    background: #232841;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    max-height: 900px;
    overflow: auto;

    .grid-attribute {
      .grid-style {
        width: 365px;
        background: rgba(2,4,19,0.21);
        border: 1px solid #374367;
        border-radius: 2px;
        padding: 0 12px;
        margin: 12px 0;

        .style-title {
          height: 20px;
          line-height: 20px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFEFE;
          display: flex;
          align-items: center;

          img {
            width: 20px;
            height: 20px;
            margin-right: 8px;
          }
        }

        p {
          margin: 15px 0;
        }

      }

      .grid-size {
        .slider-setting{
          width: 100%;
          display: flex;
          align-items: center;
          color: #fff;
          justify-content: space-between;
          ::v-deep(.n-slider) {
            width: 200px;
            .n-slider-rail{
              height: 6px;
              background: #202B40;
              border: 1px solid #374367;
              border-radius: 2px;
            }

          }
          .slider-value{
            width: 46px;
            height: 28px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .size-list {
          width: 100%;
          height: 29px;
          display: flex;
          justify-content: space-between;

          span {
            width: 80px;
            height: 29px;
            background: #374367;
            border: 1px solid #4B577B;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFEFE;
            line-height: 29px;
            opacity: 0.8;
            cursor: pointer;
            text-align: center;
          }

          .is-active {
            background: #4C7DF8;
            border: 1px solid #6C96FF;
          }
        }
      }

      .grid-color {
        .change-color {
          width: 334px;
          height: 36px;
          background: linear-gradient(0deg, #5082fb, #3e6eec);
          border-radius: 18px;
          margin-top: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          line-height: 28px;
          cursor: pointer;
        }
      }

    }

    .btns {
      width: 100%;
      height: 200px;
      padding: 21px 18px;
      z-index: 100;
      .btn {
        width: 334px;
        height: 36px;
        background: linear-gradient(0deg, #5082fb, #3e6eec);
        border-radius: 18px;
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        line-height: 28px;
        cursor: pointer;
      }
    }
    .changeWrap {
      height: 300px;
      // background: #fff;
      width: 100%;
      cursor: pointer;
      .miniVideo {
        width: 100%;
        height: 100%;
      }
      .miniMap {
        background: pink;
        width: 100%;
        height: 100%;
      }
    }
    .title{
      height: 25px;
      line-height: 20px;
      font-size: 16px;
      font-weight: 400;
      color: #fff;
    }
    .basicInfoWrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .infoItem {
        width: 180px;
        padding: 10px;
        margin-bottom: 5px;
        background: #304C8A;
        border: 1px dashed #3B6BEC;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .icon {
          img{
            // vertical-align: middle;
          }
        }
        .textWrap {
          margin-left: 10px;
          margin-top: -13px;
          .value{
            font-size: 18px;
            color: #fff;
            font-weight: bold;
          }
          .label{
            font-weight: 400;
            color: #FFFEFE;
            font-size: 14px;
            opacity: 0.6;
          }
        }
      }
    }
    .airportInfo {
      display: flex;
      // justify-content: space-around;
      justify-content: start;
      flex-wrap: wrap;
    }
    .airportInfoItem {
      width: 110px;
      height: 70px;
      margin-bottom: 10px;
      background: linear-gradient(0deg, rgba(89,135,250,0.19) 0%, rgba(35,40,65,0.04) 44%, rgba(89,135,250,0.14) 100%);
      border: 1px solid #2b4a88;
      display: flex;
      flex-direction: column;
      color: #fff;
      margin-right: 15px;
      &:nth-child(3){
        margin-right: 0;
      }
      .label{
        line-height: 30px;
        font-size: 16px;
        font-weight: 400;
        color: #517EEA;
        text-indent: 14px;
        width: 100%;
        border-bottom: 1px solid #3B4673;
      }
      .icon-wrap{
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .value{
          color: #F1F1F1;
          vertical-align: middle;
        }
        .icon{
          margin-top: 5px;
        }
      }
    }
    .commandWrap {
      padding: 0 5px;
      .button {
        width: 100%;
        height: 36px;
        line-height: 36px;
        background: linear-gradient(0deg, #5082fb, #3e6eec);
        border-radius: 20px;
        color: #fff;
        font-size: 18px;
        text-align: center;
        // padding: 10px;
        margin-bottom: 20px;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
}

.btn-disable {
  background: rgba(63, 127, 220, 0.5) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: not-allowed !important;
}
</style>
